<template>
  <el-dialog title="校区更名" :close-on-click-modal="false" :visible.sync="visible" class="cu-dialog cu-dialog_center"
    lock-scroll width="800px">
    <el-row :gutter="15" class="main" :style="{ margin: '0 auto', width: '100%' }">
      <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :rules="rules"
        v-loading="loading">
        <el-col :span="12">
          <el-form-item label="校区全称" prop="fullName">
            <el-input v-model="dataForm.fullName" disabled :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更名后" prop="newFullName">
            <el-input v-model="dataForm.newFullName" placeholder="请输入更名后校区全称" clearable required
              :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="校区简称" prop="shortName">
            <el-input v-model="dataForm.shortName" disabled :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更名后" prop="newShortName">
            <el-input v-model="dataForm.newShortName" placeholder="请输入更名后校区简称" clearable required
              :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="原因/备注" prop="notes">
            <el-input v-model="dataForm.notes" placeholder="请输入原因/备注" show-word-limit clearable required
              :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }">
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t("common.cancelButton") }}</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="loading">
        {{ $t("common.confirmButton") }}</el-button>
    </span>
  </el-dialog>
</template>
  <script>
import { getCampusInfo, updateCampusName } from "@/api/campus/campus";
export default {
  components: {},
  props: [],
  data () {
    return {
      loading: false,
      visible: false,
      dataForm: {
        id: "",
        fullName: undefined,
        shortName: undefined,
        newFullName: undefined,
        newShortName: undefined,
        notes: undefined,
      },
      rules: {
        newFullName: [
          {
            required: true,
            message: "请输入更名后校区全称",
            trigger: "blur",
          },
        ],
        newShortName: [
          {
            required: true,
            message: "请输入更名后校区简称",
            trigger: "blur",
          },
        ],
        notes: [
          {
            required: true,
            message: "请输入原因/备注",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    goBack () {
      this.$emit("refresh");
    },
    init (row) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        this.dataForm = row;
      });
    },
    dataFormSubmit () {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          updateCampusName(this.dataForm).then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                this.visible = false;
                this.loading = false;
                this.$emit("refresh", true);
              },
            }).catch(() => {
              this.loading = false;
            });
          });
        }
      });
    },
  },
};
  </script>
  